<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
		<title>活动</title>
        <script src="./jquery.js"></script>
        <style>
            #inputBox{
                font-size: 16px;
                margin: 5px;
                padding: 3px;
                width: 70%;
                padding: 5px;
            }
        </style>
	</head>
	<body>
        <textarea name="" id="inputBox"  rows="1"></textarea>
	</body>
    <script>
    $(function(){
        var index = {
            
            initialize:function(){
                var inputBox = $('#inputBox');
                inputBox.on('input',function(e){
                    index.inputChangeHeight(e);
                });
            },

            inputChangeHeight:function(e){
                var target = $(e.currentTarget);
			    //var fontSize = parseInt(target.css('font-size'));
			    //var width = target.width()-fontSize;   //198
                var width = target.width()

			String.prototype.replaceAllActivity  = function(s1,s2){   
				return this.replace(new RegExp(s1,"gm"),s2);   
 			}

			if(target.next().prop('tagName')==="DIV"){
				var nextDiv = target.next();
				var targetVal = target.val();
				nextDiv.html(targetVal.replaceAllActivity('\n','<br/>&nbsp'));
				nextDiv.css('display','block');
				var height = nextDiv.height();
				nextDiv.css('display','none');
				if(height==0){
					target.attr('rows',1);
				}else{
					target.css('height',height+'px');
				}
				//jroll.refresh();
			}else{
				var div = $('<div></div>');
				div.css('width',width).css('height','auto');
				var targetVal = target.val();
				div.html(targetVal.replaceAllActivity('\n','<br/>&nbsp'));
				target.after(div);
				var height = div.height();
				div.css('display','none');
				console.log(height);
				if(height==0){
					target.attr('rows',1);
				}else{
					target.css('height',height+'px');
				}
				//jroll.refresh();
			}
            }

        }

        index.initialize();

    });
    </script>
</html>
